<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vampire1.0.js"></script>
		<link rel="stylesheet" href="css/move.css" />
	</head>
	<body>
		<div class='button'>
			<input type="file" id='file' multiple="multiple" accept=".jpg,.png" />
		</div>
		<div class='fiexd-bg'></div>
		
		
		<script>
			var utils = new vampire.utils();
			var dom = new vampire.dom();
			var move = {move:1};
			var files = document.getElementById("file");
			var lo = localStorage;
			if(lo.getItem("img")){
				imgs = lo.getItem("img").split("||");
				imgS = [];
				utils.each(imgs,function(k,v){
					var img = new Image;
					img.src = v;
					imgS.push(img);
				});
				createMove(imgS);
			};
			files.addEventListener("change",function(e){
				var imgs = []; imgs.len = this.files.length;
					var imgSrc = [];
				utils.each(this.files,function(k,v){
					var readfile = new FileReader;
					var img =  new Image;

					readfile.readAsDataURL(v);
					readfile.onload=function(e){
						img.src = readfile.result;
						imgs.push(img);
						imgSrc.push(readfile.result);
						if(imgs.length==imgs.len){
							console.log("完成");
							if(move.parent){
								move.parent.parentElement.removeChild(move.parent);
								move.len = 1;
							};
							createMove(imgs);
							lo.setItem("img",imgSrc.join("||"));
						};
					};
				});
			});
			function createMove(ar){
				move.parent = dom.createDom("div","full",document.body);
				move.wrap = dom.createDom("div","wrap gpu",move.parent);
				utils.each(ar,function(k,v){
					var div = dom.createDom("div","child",move.wrap );
					div.appendChild(v);
				});
				utils.each(move.wrap.children,function(k,v){
						addCss(v,k);
				});
			};
			function addCss(el,i){
				var len = 360/el.parentElement.children.length;
				console.log(len);
				if(el.parentElement.children.length<3){
					var height = el.offsetWidth/2;
				console.log(height);
				}else{
					var height = el.offsetWidth/2*Math.tan(0.5*Math.PI-(len/180*Math.PI/2))+40;
				};
				el.style.transform="rotate3d(0,1,0,"+i*len+"deg) "+" translate3d(0,0,"+height+"px)";	
				el.style.color = 'white';
				move.len = len;
			};
			document.onkeyup=function(e){
					if(e.keyCode==32){
						move.wrap.style.transform =  "rotate3d(0,1,0,"+move.move*move.len+"deg)";
						move.move++;
					};
			};
		</script>
	</body>
</html>
